import React, { PropTypes } from 'react'
import { Form, Button, Row, Col,Radio,Select,Checkbox } from 'antd'
import CustomDatePicker from '../basic/custom-date-picker'
const RadioGroup = Radio.Group
const CheckboxGroup = Checkbox.Group

class header extends React.Component {
  constructor (props) {
    super(props);
    this.state={
      activeMenu:'day',
      dataType:1
    };
    this.dataType=1;
    this.params={
      numbers:{}
    };
    this.checkedStations=[]
    this.startAt="";
    this.endAt=""
    this.activeMenu='day'
  }
  initDate(t){
    if(t=='hour'||t==undefined){
        var dd = new Date();
        dd.setDate(dd.getDate());
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;
        var d = dd.getDate();
        var h= dd.getHours();
        this.startAt=y+"-"+m+"-"+d+" 00:00:00";
        this.endAt=y+"-"+m+"-"+d+" "+h+":00:00"
    }else if(t=='day'||t=='day2'){
        //前7天
        const timestamp = Date.parse(new Date())
        const n=timestamp-1000*60*60*24*7
        const t=new Date(n).format("yyyy-MM-dd")
        this.startAt=t+" 00:00:00";
        //昨天
        this.endAt=this.getYesterday()
    }else if(t=='month'){
        this.startAt=this.getPrevMonth();
        this.endAt=this.getPrevMonth()
    }else if(t=='quarter'){
        this.startAt=this.getYear()+'-01';
        this.endAt=this.getYear()+'-03'
    }else{
        this.startAt=this.getYear()-1;
        this.endAt=this.getYear()-1
    }

    this.params.startAt=this.startAt;
    this.params.endAt=this.endAt
  }
  getYesterday=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate()-1);
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     var d = dd.getDate();
     return y+"-"+m+"-"+d+" 00:00:00"
  }
  getPrevMonth=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     if(m==1){
         y=y-1
         m=12
     }else{
         m=m-1
     }
     return y+"-"+m
  };
  //前两个月
  getPrevMonth2=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     if(m==1||m==2){
         y=y-1
         m=m+10
     }else{
         m=m-2
     }
     return y+"-"+m
  };
  getYear=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();

     return y
  };
  getPrevYear=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();

     return y-1
  };
  handleMenuChange = (e) => {
    console.log("handleMenuChange")
    const key=e.target.value;
    //根据不同类型初始化不同的时间
    this.initDate(key);
    this.type=key;
    this.params.type=key;
    this.setState({ activeMenu: key });
    this.onSearch()
  };
  onSelectChange=(t,e)=>{

      if(t=='dataType'){
        const value=e.target.value;
        this.params.dataType=value;
        this.setState({dataType:value});
        this.props.onDataTypeChange(value)
      }else{
        this.params.numbers[t]=e
      }
  }
  onStationChange=(checkedValues)=>{
    this.checkedStations=checkedValues
  }
  onSearch(){
    if(this.params.type=="month"||this.params.type=="quarter"){

      if(this.params.startAt.split("-").length<3){
        this.params.startAt=this.params.startAt+"-01"
        this.params.endAt=this.params.endAt+"-31"
      }
     
    }
    
    let stations='""'
    const len=this.checkedStations.length
    for(let i=0;i<len;i++){
      stations+=',"'+this.checkedStations[i]+'"'
    }
    
    this.params.stations=stations
    this.props.onSearch(this.params)
  }
  randerNumSelect=()=>{
     return (
       <Col lg={24}>
        <span style={{marginRight:5}}>SO2</span>
       <Select
            onChange={(e)=>this.onSelectChange('so2',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
        <span style={{marginLeft:5,marginRight:5}}>NO2</span>
        <Select
            onChange={(e)=>this.onSelectChange('no2',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
          <span style={{marginLeft:5,marginRight:5}}>PM10</span>
        <Select
            onChange={(e)=>this.onSelectChange('pm10',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
          <span style={{marginLeft:5,marginRight:5}}>PM2.5</span>
        <Select
            onChange={(e)=>this.onSelectChange('pm25',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
          <span style={{marginLeft:5,marginRight:5}}>O3</span>
        <Select
            onChange={(e)=>this.onSelectChange('o3',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
        <span style={{marginLeft:5,marginRight:5}}>CO</span>
        <Select
            onChange={(e)=>this.onSelectChange('co',e)}
            defaultValue="1"
            style={{ width: 60 }}
          >
          <Select.Option value="0">0</Select.Option>
          <Select.Option value="1">1</Select.Option>
          <Select.Option value="2">2</Select.Option>
          <Select.Option value="3">3</Select.Option>
        </Select>
         </Col>
     )
  };
  render(){

    const self=this;
    const {activeMenu}=this.state
    const {stations,hasAirQuality}=this.props

    if(this.params.startAt==undefined||this.activeMenu!=activeMenu){
      this.activeMenu=activeMenu
      this.initDate(activeMenu)
    }
    
    const customDatePickerProps={
      startAt:self.startAt,
      endAt:self.endAt,
      type:activeMenu,
      onTimeChange(startAt,endAt){
        
        self.params.startAt=startAt;
        self.params.endAt=endAt
      }
    };
    let stationArray=[]
    
    stations.map(function(item,i){
      stationArray=stationArray.concat({
        label:item.name,
        value:item.code
      })
    })
    return (
      <Row gutter={24}>
         <Row gutter={24}>
              <h4 style={{marginBottom:10}}>时间类型选择:</h4>
              <Radio.Group value={activeMenu} onChange={this.handleMenuChange}>
                <Radio.Button value="day">累积</Radio.Button>
                <Radio.Button value="day2">日</Radio.Button>
                <Radio.Button value="month">月</Radio.Button>
                <Radio.Button value="quarter">季度</Radio.Button>
                <Radio.Button value="halfyear">半年</Radio.Button>
                <Radio.Button value="year">年</Radio.Button>
              </Radio.Group>
          </Row>
          <h4 style={{float:'left',marginTop:10,marginBottom:10}}>时间段选择:</h4>
          <CustomDatePicker {...customDatePickerProps}/>
          <Row gutter={24} style={{marginBottom:20}}>
            <h4 style={{float:'left',marginBottom:10}}>站点选择:</h4>
            <Col lg={24}>
              <CheckboxGroup options={stationArray} onChange={this.onStationChange} />
            </Col>
          </Row>
          <Row gutter={24} >
           
            <h4 style={{float:'left',marginBottom:10}}>浓度小数位数设置:</h4>
            {this.randerNumSelect()}
            <h4 style={{float:'left',marginTop:10,marginBottom:10}}>数据类型:</h4>
            <Col lg={24}>
                <RadioGroup onChange={(e)=>this.onSelectChange('dataType',e)} value={this.state.dataType}>
                  <Radio value={1}>浓度情况</Radio>
                  {!hasAirQuality?"":<Radio value={2}>质量等级情况</Radio>}
                </RadioGroup>

                <Button type="primary" style={{marginBottom:20}} onClick={()=>this.onSearch()}>立即查询</Button>
            </Col>
          </Row>
      </Row>
    )
  }
}

export default header
